<ui:composition
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">

    <script type="text/javascript" language="javascript" src="#{request.contextPath}/resources/js/jquery.countdown.js" />
    <script type="text/javascript" language="javascript" src="#{request.contextPath}/resources/js/jquery.countdown-es.js" />

    <script type="text/javascript">

        function serverTime() {
            var horaServer = new Date(${poolAplicacionBean.stringFechaServer});
            return horaServer;
        }

    </script>

    <h:panelGroup layout="block" rendered="#{fn:length(poolAplicacionBean.pooles)>0}"
                  style="padding-top: 3px;">

        <p:carousel value="#{poolAplicacionBean.pooles}" var="p" style="width: 980px;"
                autoPlayInterval="400"
                numVisible="1"
                vertical="true"
                circular="true">

        <f:facet name="header">
            Pooles Activos
        </f:facet>

        <h:panelGrid columns="1" style="width:972px;" cellpadding="5">

            <h:panelGroup layout="block" styleClass="poolInfo" >

                <div class="poolContador">

                    <script type="text/javascript">
                        $(function () {
                            var fechaFin = new Date(#{poolSessionBean.fechaFin(p)} );
                            $('#defaultCountdown#{p.nroPool}').countdown({until: fechaFin, serverSync: serverTime()});
                        });
                    </script>

                    <div style="height: 10px; margin-top: 1px;margin-bottom: 1px; font-weight: bold;" > Finaliza en </div>
                    <div id="defaultCountdown#{p.nroPool}" style="height: 55px; "></div>

                </div>

                <h:panelGroup layout="block" styleClass="poolDatos" >

                    <h:panelGroup layout="block" styleClass="poolDescripcion">

                        <p:commandLink action="#{poolSessionBean.seleccionarPool(p)}" process="@this" ajax="false" immediate="true" >
                           <h:outputText value="#{p.descripcion}" style="font-weight: bold;" />
                           <p:graphicImage value="../resources/imagenes/masinfo.jpg" width="120" height="22" />
                        </p:commandLink>

                    </h:panelGroup>
                    
                    <h:panelGroup layout="block" styleClass="poolCantidades">

                        <p:idleMonitor timeout="9000" >
                            <p:ajax event="idle" update="cantDisponible, porcentajeVenta" />
                        </p:idleMonitor>

                       <p:commandLink id="cantDisponible" action="#{poolSessionBean.seleccionarPool(p)}"
                                      process="@this"
                                      ajax="false" immediate="true"  >

                       <h:outputText  value="#{p.cantidadDisponible}"
                                     style="margin: 10px;">
                           <f:convertNumber pattern="0"/>
                       </h:outputText>

                       <h:outputText value="Unidades disponibles" />

                       <p:effect type="pulsate" event="load" delay="1">
                            <f:param name="mode" value="'show'" />
                       </p:effect>

                       </p:commandLink>
                    </h:panelGroup>

                    <h:panelGroup layout="block" styleClass="poolBarraPorcentaje" style="">

                        <p:progressBar id="porcentajeVenta"
                              value="#{poolSessionBean.porcentajeFinalizadoPool(p)}" labelTemplate="{value}% Vendido"
                              displayOnly="true" style="height: 15px; width: 320px; font-size: 10px;"   >

                           <p:effect type="shake" event="load" delay="1">
                                <f:param name="mode" value="'show'" />
                           </p:effect>

                       </p:progressBar>
                    </h:panelGroup>
                </h:panelGroup>

                <h:panelGroup layout="block" styleClass="poolComprar" >

                    <p:commandLink action="#{poolSessionBean.seleccionarPool(p)}"
                                   process="@this"
                                   rendered="#{p.activa}"
                                   ajax="false" >
                       <p:graphicImage value="../resources/imagenes/boton-carrito.png" width="60" height="40" />
                       <h:outputText value="Comprar" rendered="#{p.activa}"/>

                    </p:commandLink>
                </h:panelGroup>

                <h:panelGroup layout="block" styleClass="poolBasesCondicones" >

                    <p:commandLink action="../pool/basesCondiciones.xhtml" process="@this" ajax="false" >
                       <p:graphicImage value="../resources/imagenes/info32.png" />
                       <br/>
                       <h:outputText value="Términos y Condiciones"/>
                   </p:commandLink>
                    
                </h:panelGroup>

            </h:panelGroup>

        </h:panelGrid>

    </p:carousel>


    </h:panelGroup>

</ui:composition>
